<!--
  * @Description: 公司详情
  * @Author: rcc
  * @Date: 2024-08-06 18:37:03
  * @FilePath: /rc-recruitment/pages/office/firm/firm.vuee
-->

<template>
  <view class="p-h24">
    <view class="section flex m-t30 p-h20 p-v30">
      <view class="flex-d-lc flex-1">
        <view class="flex">
          <text class="text-700-140">{{ company?.title }}</text>
          <text class="tag m-l20 text-400-224">已认证</text>
        </view>
        <view class="flex m-t24">
          <image class="square-20" src="@/static/images/public/show.png" />
          <text class="m-l10 text-400-328">成都</text>
          <text class="flex-1 m-l40 text-c text-400-328"> {{ company?.nature.name }} | {{ company?.guimo ?? '--'
          }}人</text>
        </view>
      </view>

      <image class="cover" :src="genStaticUrl(company?.images.split(',')[0])" mode="aspectFill" />
    </view>

    <view class="label-view m-t40 p-l20">
      <text class="text-700-132">公司信息</text>
    </view>

    <view class="section m-t20 p-t20">
      <view class="p-h20">
        <image class="firm-cover" :src="genStaticUrl(company?.images.split(',')[0])" mode="aspectFill" />
      </view>
      <view class="flex-d-lc p-h20 p-v20">
        <text class="text-700-128">公司简介：</text>
        <text class="m-t20 text-400-128">{{ company?.intro }}</text>
      </view>
      <view class="line" />
      <view class="flex-d-lc p-h20 p-v20">
        <view class="text-700-128">工作地点：</view>
        <view class="flex w m-t20">
          <!-- <text class="flex-1 text-400-328">成都市·高新区·泰达时代中心一号楼14层</text> -->
          <text class="flex-1 text-400-328">{{ company?.address ?? '--' }}</text>
          <image class="square-22" src="@/static/images/public/arrow-1.png" />
        </view>
      </view>
    </view>

    <RcOffice :list="positionList" />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import RcOffice from './components/office.vue'
import { genStaticUrl } from '@/utils/utils'
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
onShareAppMessage(() => {
  return {
    title: company.value.title,
    path: `/pages/office/firm/firm?id=${companyId.value}`
  }
})
onShareTimeline(() => {
  return {
    title: company.value.title,
    path: `/pages/office/firm/firm?id=${companyId.value}`
  }
})
const companyId = ref('')
const company = ref()

const positionList = ref([])

const getInfo = () => {
  uni.showLoading({ mask: true })
  uni.$u.get('/company/info', { id: companyId.value }).then((res) => {
    if (res.code === 1) {
      company.value = res.data
    }
  }).finally(() => {
    uni.hideLoading()
  })
}

const getPositionList = () => {
  uni.$u.get('/position/lst', { company_id: companyId.value }).then((res) => {
    if (res.code === 1) {
      positionList.value = res.data.data
    }
  })
}

onLoad((e) => {
  companyId.value = e?.id ?? ''

  getInfo()
  getPositionList()
})
</script>

<style lang="scss">
page {
  background-color: $page-color-3;
}
</style>

<style lang="scss" scoped>
page {
  background-color: $page-color-3;
}

.section {
  border-radius: 20rpx;
  background-color: $bg-color-1;

  .tag {
    width: 124rpx;
    height: 46rpx;
    padding-left: 30rpx;
    line-height: 46rpx;
    text-align: center;
    background: url("") no-repeat center;
    background-size: 100% 100%;
  }

  .cover {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
  }

  .line {
    border-top: 1rpx solid $border-color-4;
  }

  .firm-cover {
    width: 100%;
    height: 285rpx;
    border-radius: 10rpx;
  }
}

.label-view {
  border-left: 8rpx solid $border-color-1;
}
</style>
